位图图像与矢量图形

位图图像

位图图像（ bitmap image ）又称栅格图（ raster graphics ），由像素矩阵组成，也就是由无数个像素点组成 。位图图像的特点是色彩变化丰富，可逼真地再现世界，因此常用于数码照片、页面效果图等。但当无限放大时，将会看到像素块，图像会失真。

矢量图形

矢量图形（ vector graphics ）由点和线组成，把点看成是一个坐标，在两个点之间用曲线或直线连接，可以组成任何形状 。与位图相比，色彩比较简单，无法表现逼真图像，但是当放大、缩小或旋转的时候，不会丢失细节，也不会影响清晰度（即不失真），常用于三维建模、特殊字体、图标和 logo 等。

在页面中使用 canvas 元素

canvas 元素是 HTML 5 的新元素，用于在网页上绘制图形，相当于在 HTML 中嵌入了一张画布，这样就可以直接在页面上进行图形操作了，因此 canvas 具有极大的应用价值，可以在较多场景下使用。

默认情况下， Canvas 所创建的矩形区域大小为宽 300 像素、高 150 像素，也可以使用 width 与 height 属性来自定义其宽度和高度。

canvas 元素本身是没有绘图能力的，需要借助额外的 JavaScript 脚本来实现绘图。

渲染上下文对象 Conte`xt

canvas 元素只是一个容器，只使用它并不能够做任何事情。在 Windows 里绘制图形时需要先得到一个设备上下文 DC ，同样，在 canvas 元素上绘图时也需要得到一个渲染上下文对象 Context 。

上下文对象可以让各种不同的图形设备在外界看起来都是一个样式，这样读者只需要关注绘图，其它的工作都可以交给操作系统和浏览器。简单来说，上下文对象就是把各式各样的具体变成一个统一的抽象，从而减轻开发人员的负担。使用 canvas 绘图时并不是直接绘制到屏幕上的，而是先画到一个上下文 Context 上，然后再刷新到屏幕上。

一个 canvas 元素中只能有一个唯一的 ID 并且每个上下文对象也都是唯一的，获取渲染上下文对象 Context 非常简单，首先获取 canvas 元素对象，然后再调用 canvas 对象的 getContext() 方法。

canvas 与 SVG 的区别

SVG （ Scalable Vector Graphics ）即可伸缩矢量图形，是一种用 XML 描述图形的标记语言，用于描述二维矢量图形的一种图形格式。 SVG 由 W3C 制定，是一个开放标准。另外， SVG 还是 Static Var Generator （静止无功发生器）的简称。，早在 2003 年就已成为 W3C 标准。与 Canvas 只能用 JavaScript 绘图不同， SVG 提供了各种类型的元素，包括形状、文本、渐变、动画和滤镜等，并且可以为每个元素附加 DOM 事件，还能用 CSS 控制它们的样式，不过只能使用部分 CSS 属性，如 border 、 background 就不可用。 SVG 中也可插入图像（即插入 img 元素），执行裁剪、遮罩、旋转等功能。不过， SVG 不能像 canvas 那样，将处理过的图形输出， canvas 元素有个 toDataURL() 方法，可以将画布中的内容编码成字符串形式。

SVG 有很多优势，例如，其图像可以通过文本编辑器来创建和更改， SVG 图像可以被搜索、索引、脚本化或压缩， SVG 图像可以在任何的分辨率下被高质量地打印，以及可以在图像质量不下降的情况下被放大等。

	Canvas	SVG
依赖分辨率	依赖分辨率	不依赖分辨率
事件处理器	不支持事件处理器	支持事件处理器
渲染能力	比较弱， 不适合大型程序	最适合带有大型渲染区域的应用程序， 如谷歌地图
游戏应用	最适合图像密集型的游戏	不太适合做游戏应用

• svg 通常用于查看和打印高保真文档，例如，在制作一个分辨率无关的用户界面或者漂亮的动画时就可以选择 svg
• 在绘制一些图表曲线（如科学研究的数据可视化）时也可以使用 svg
• 如果要完成的工作非常困难，可以通过取长补短将两者结合起来使用

如果浏览器不支持 Canvas

有些浏览器可能不支持 canvas 元素，因此就需要为这些浏览器提供替代显示的内容。方法比较简单，只需要直接在 canvas 元素内插入替代内容即可。不支持 canvas 的浏览器会忽略 canvas 元素而直接显示替代内容，支持 Canvas 的浏览器则会正常地渲染 Canvas 。

测浏览器支持

可以使用 JavaScript 脚本来检测浏览器是否支持 canvas ，方法是判断 getContext 函数是否存在。

复杂场景使用多层画布

为了减少对单一画布的操作、 提高画布性能， 在较为复杂场景下， 可以使用多层画布 。

使用 requestAnimationFrame 制作游戏或动画

目前， 制作动画可以使用 CSS 3 的 animattion + keyframes ， 也可以使用 CSS 3 的 transition 属性， 或者使用 SVG 。 当然还可以使用最原始的 window.setTimout() 或者 window.setInterval() 方法， 通过不断更新元素的状态位置等来实现动画， 前提是画面的更新频率要达到每秒 60 次才能让肉眼看到流畅的动画效果。

setTimeout() 几乎在所有浏览器上都运行得不错， 但还有一个更好的方法， 那就是 requestAnimFrame 。 requestAnimFrame 方法原理与 setTimeout / setInterval 差不多， 通过递归调用同一方法来不断更新画面以达到动起来的效果， 但它优于 setTimeout / setInterval ， 在于它是由浏览器专门为动画提供的 API ， 在运行时浏览器会自动优化方法的调用， 并且如果页面不是激活状态的话， 动画会自动暂停， 可以优化绘制循环， 减少与剩下的页面回流， 有效节省了 CPU 开销。

可以直接调用 requestAnimationFrame 方法， 也可以通过 window 来调用， 接收一个函数作为回调， 返回一个 ID 值， 通过把这个 ID 值传给 window.cancelAnimationFrame() 可以取消该次动画。

如何显示满屏 canvas

根据画布所包含的文件元素的大小来灵活地调整画布尺寸 。

canvas 圆环进度条

圆形进度条的步骤是： 开始画一个灰色的圆、 填充颜色、 画进度、 画内部空白、 画一条线、 在画布中间写上进度文案 。

清空画布

使用 clearRect 方法可清除指定的矩形区域内的所有图形， 显示出画布的背景 。

context.clearRect(x, y, width, height);